<%--
  Created by IntelliJ IDEA.
  User: ChenYu
  Date: 2017-06-12
  Time: 17:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="/static/common/taglib.jsp" %>
<html>
<head>
    <%@include file="../public/back/commonCss.jsp" %>
    <%@include file="../public/back/commonJs.jsp" %>
</head>
<body>
<div class="pd">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>鞋子添加/修改</legend>
    </fieldset>
    <form class="layui-form layui-form-pane">
        <input type="hidden" name="id" value="${shoes.id}">
        <div class="layui-form-item">
            <label class="layui-form-label">鞋子编号</label>
            <div class="layui-input-inline">
                <input type="text" name="num" lay-verify="required" placeholder="请输入鞋子编号" class="layui-input"
                       value="${shoes.num}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">鞋子名称</label>
            <div class="layui-input-inline">
                <input type="text" name="name" lay-verify="required" placeholder="请输入鞋子名称" class="layui-input"
                       value="${shoes.name}">
            </div>
        </div>
        <div class="layui-form-item" pane="">
            <label class="layui-form-label">男款/女款</label>
            <div class="layui-input-inline">
                <input type="radio" name="belongSex" value="男" title="男"
                       <c:if test="${shoes.belongSex eq '男' or empty shoes.belongSex}">checked</c:if>>
                <input type="radio" name="belongSex" value="女" title="女"
                       <c:if test="${shoes.belongSex eq '女'}">checked</c:if>>
            </div>
        </div>
        <div class="layui-form-item" style="width: 80%">
            <label class="layui-form-label">鞋子颜色</label>
            <div class="layui-input-inline">
                <input type="text" name="color" lay-verify="required" placeholder="请输入鞋子颜色" class="layui-input"
                       value="${shoes.color}">
            </div>
            <div class="layui-input-inline">
                <input type="text" name="colorEn" lay-verify="required" placeholder="EN" class="layui-input"
                       value="${shoes.colorEn}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">鞋子款式</label>
            <div class="layui-input-inline">
                <input type="text" name="style" lay-verify="required" placeholder="请输入鞋子款式" class="layui-input"
                       value="${shoes.style}">
            </div>
            <div class="layui-input-inline">
                <input type="text" name="styleEn" lay-verify="required" placeholder="EN" class="layui-input"
                       value="${shoes.styleEn}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">鞋子材质</label>
            <div class="layui-input-inline">
                <input type="text" name="material" lay-verify="required" placeholder="请输入鞋子材质" class="layui-input"
                       value="${shoes.material}">
            </div>
            <div class="layui-input-inline">
                <input type="text" name="materialEn" lay-verify="required" placeholder="EN" class="layui-input"
                       value="${shoes.materialEn}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">鞋底</label>
            <div class="layui-input-inline">
                <input type="text" name="shoeBelow" lay-verify="required" placeholder="请输入鞋底" class="layui-input"
                       value="${shoes.shoeBelow}">
            </div>
            <div class="layui-input-inline">
                <input type="text" name="shoeBelowEn" lay-verify="required" placeholder="EN" class="layui-input"
                       value="${shoes.shoeBelowEn}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">可选尺寸</label>
            <div class="layui-input-inline">
                <input type="text" name="sizeRange" lay-verify="required" placeholder="可选尺寸" class="layui-input"
                       value="${shoes.sizeRange}">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">价格</label>
                <div class="layui-input-inline">
                    <input type="text" name="price" placeholder="￥" lay-verify="required|number" class="layui-input"
                           value="${shoes.price}">
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-form-text" style="width: 80%">
            <label class="layui-form-label">鞋子说明</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入内容" class="layui-textarea" name="description"
                          lay-verify="required">${shoes.description}</textarea>
            </div>
        </div>
        <div class="layui-form-item" style="width: 80%">
            <label class="layui-form-label">淘宝链接</label>
            <div class="layui-input-block">
                <input type="text" name="taoBaoHref" placeholder="淘宝链接" class="layui-input" value="${shoes.taoBaoHref}">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">显示顺序</label>
                <div class="layui-input-inline">
                    <input type="text" name="sortOrder" placeholder="显示顺序" lay-verify="required|number"
                           class="layui-input"
                           value="${shoes.sortOrder}">
                </div>
            </div>
        </div>
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend> 照片（封面图片，用于展示，只能选择一张）</legend>
        </fieldset>
        <div class="site-demo-upload">
            <c:if test="${empty shoes.coverImg}">
                <img id="img1" src="${ctx}/static/back/images/detail.png">
            </c:if>
            <c:if test="${not empty shoes.coverImg}">
                <img id="img1" src="${baseInfo.fileServerPath}${shoes.coverImg}">
            </c:if>
            <input id="ip1" type="hidden" name="coverImg" value="${shoes.coverImg}">
        </div>
        <button type="button" class="layui-btn layui-btn-primary layui-btn-small" id="coverImg">上传封面</button>
        <fieldset class="layui-elem-field layui-field-title">
            <legend>其他照片-可一次选择多张</legend>
        </fieldset>
        <div class="layui-upload">
            <button type="button" class="layui-btn layui-btn-small" id="test2">上传详情图片</button>
            <button type="button" class="layui-btn layui-btn-primary  layui-btn-small" onclick="clearImg()">清空已上传
            </button>
            <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                <div class="layui-upload-list" id="demo2"></div>
            </blockquote>
        </div>
        <div class="layui-form-item" style="margin-top: 20px">
            <button class="layui-btn" lay-submit="" lay-filter="demo1">保存</button>
            <button class="layui-btn layui-btn-primary" onClick="goHome()">返回</button>
        </div>
    </form>
</div>
<script>
    form.render();
    var url = '${ctx}/back/shoes/uploadFile';
    var fileServerPath = "${baseInfo.fileServerPath}";
    var shoesImgs = [];
    var upload = layui.upload;
    upload.render({
        url: url, elem: '#coverImg', exts: 'jpg|png|JPG|PNG',
        done: function (res) {
            img1.src = fileServerPath + res.dataMap.imgPath;
            ip1.value = res.dataMap.imgPath;
        }
    });
    //多图片上传
    upload.render({
        elem: '#test2',
        url: '${ctx}/back/upload/img',
        multiple: true,
        done: function (res) {
            $('#demo2').append('<img src="' + res.data.fileAllPath + '" width="200" height="200" class="layui-upload-img">')
            //上传完毕
            console.log(res);
            shoesImgs.push(res.data.filePath)
        }
    });
    $(function () {
        var otherImgs = '${otherImg}';
        if (otherImgs != '') {
            shoesImgs = otherImgs.split(",");
            initShoesImg(shoesImgs);
        }
    });

    function clearImg() {
        $("#demo2 img").remove();
        shoesImgs = [];
    }

    function initShoesImg(shoesImgs) {
        if (shoesImgs.length > 0) {
            for (var i = 0; i < shoesImgs.length; i++) {
                $('#demo2').append('<img src="' + fileServerPath + shoesImgs[i] + '" width="200" height="200" class="layui-upload-img">')
            }
        }
    }

    //监听提交
    form.on('submit(demo1)', function (data) {
        data.field.shoesImgs = shoesImgs;
        var dataStr = {
            data: jsonUtil.parseStr(data.field)
        };
        ajaxUtil.post('${ctx}/back/shoes/saveOrUpdate', dataStr, false, function (data) {
            layerUtil.parentConfirm('保存成功', function () {
                window.location.href = '${ctx}/back/shoes/all';//跳转到列表页
            })
        });
        return false;
    });

    //返回
    function goHome() {
        parent.window.location.reload();
    }
</script>
</body>
</html>
